<template>
	<el-container class="head-container">
		<el-header style="text-align: right; font-size: 12px">
			<div class="toolbar">
				<el-dropdown>
					<el-icon style="margin-right: 8px; margin-top: 1px"
						><setting
					/></el-icon>
					<template #dropdown>
						<el-dropdown-menu>
							<el-dropdown-item>View</el-dropdown-item>
							<el-dropdown-item>Add</el-dropdown-item>
							<el-dropdown-item>Delete</el-dropdown-item>
						</el-dropdown-menu>
					</template>
				</el-dropdown>
				<span>Tom</span>
			</div>
		</el-header>
	</el-container>
</template>

<style scoped>
/* .head-container .el-header {
  position: relative;
  background-color: #b3c0d1;
  color: var(--el-text-color-primary);
}
.head-container .toolbar {
  position: absolute;
  display: inline-flex;
  align-items: center;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
} */
</style>